<template>
	<view class="cert-container">
		<!-- 头部导航 -->
		<view class="header">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">
				<text class="title-text">身份认证</text>
			</view>
			<view class="nav-right">
				<text class="menu-icon">⋯</text>
				<text class="menu-icon">─</text>
				<text class="dot-icon">◎</text>
			</view>
		</view>

		<!-- 表单字段 -->
		<view class="form-section">
			<view class="form-item">
				<view class="label-row">
					<text class="label">姓名</text>
					<text class="required">*</text>
				</view>
				<input class="input" v-model="formData.name" placeholder="请输入姓名" />
			</view>

			<view class="form-item">
				<view class="label-row">
					<text class="label">学号</text>
				</view>
				<input class="input" v-model="formData.studentId" placeholder="请输入" />
			</view>

			<view class="form-item">
				<view class="label-row">
					<text class="label">联系电话</text>
					<text class="required">*</text>
				</view>
				<input class="input" v-model="formData.phone" placeholder="请输入联系电话" />
			</view>

			<view class="form-item">
				<view class="label-row">
					<text class="label">备注</text>
					<text class="optional">选填</text>
				</view>
				<textarea class="textarea" v-model="formData.remarks" placeholder="请输入备注信息" />
			</view>
		</view>

		<!-- 图片上传 -->
		<view class="upload-section">
			<text class="upload-title">请上传学生证或校园卡照片</text>
			<view class="upload-area" @click="chooseImage">
				<view v-if="!uploadedImage" class="upload-placeholder">
					<view class="id-card-icon">
						<view class="card-frame">
							<view class="person-icon">👤</view>
						</view>
					</view>
				</view>
				<image v-else class="uploaded-image" :src="uploadedImage" mode="aspectFit" />
			</view>
		</view>

		<!-- 说明部分 -->
		<view class="description-section">
			<text class="description-title">说明:</text>
			<text class="description-text">我们将对用户的所有资料进行保密,如遇泄密请及时联系小程序官方客服:teqin34449368287</text>
			<text class="description-text">特嘿校园跑腿小程序身份认证说明</text>
			<text class="description-text">一、认证目的</text>
			<text class="description-text">特嘿校园跑腿小程序致力于为校园内师生提供安全、便捷、可靠的跑腿服务体验。</text>
			<text class="description-text">为了确保平台上所有跑腿相关活动的真实性、合法性,以及保障用户的权益和校园的正常秩序,我们实施严格的身份认证流程。</text>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @click="submitCertification">
				点击提交
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	// 表单数据
	const formData = ref({
		name: '',
		studentId: '',
		phone: '',
		remarks: ''
	})

	// 图片数据
	const uploadedImage = ref('')

	// 方法
	const goBack = () => {
		uni.navigateBack()
	}

	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				console.log('选择图片成功:', res)
				const tempFilePath = res.tempFilePaths[0]
				uploadedImage.value = tempFilePath
				uni.$tao?.toast?.('图片上传成功')
			},
			fail: (err) => {
				console.error('选择图片失败:', err)
				uni.$tao?.toast?.('选择图片失败')
			}
		})
	}

	const submitCertification = () => {
		// 验证必填字段
		if (!formData.value.name.trim()) {
			uni.$tao?.toast?.('请输入姓名')
			return
		}
		if (!formData.value.phone.trim()) {
			uni.$tao?.toast?.('请输入联系电话')
			return
		}

		// 验证手机号格式
		const phoneReg = /^1[3-9]\d{9}$/
		if (!phoneReg.test(formData.value.phone)) {
			uni.$tao?.toast?.('手机号格式不正确')
			return
		}

		console.log('提交认证信息:', formData.value)
		
		uni.showLoading({
			title: '提交中...'
		})

		setTimeout(() => {
			uni.hideLoading()
			uni.$tao?.toast?.('认证信息提交成功')
			
			// 保存认证状态为"申请中"
			uni.setStorageSync('certificationStatus', 'applying')
			
			// 延迟返回profile页面
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/my/profile/profile'
				})
			}, 1500)
		}, 1000)
	}
</script>

<style lang="scss" scoped>
	.cert-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}

	// 头部导航
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.nav-left, .nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.back-icon {
		font-size: 36rpx;
		color: #333;
	}

	.nav-title {
		flex: 1;
		text-align: center;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.menu-icon, .dot-icon {
		font-size: 28rpx;
		color: #666;
	}

	// 表单部分
	.form-section {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.form-item {
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.label-row {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.required {
		color: #ff4757;
		font-size: 28rpx;
		margin-left: 5rpx;
	}

	.optional {
		color: #999;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
		font-size: 28rpx;
		background-color: #f9f9f9;
		box-sizing: border-box;
	}

	.textarea {
		width: 100%;
		height: 120rpx;
		padding: 20rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
		font-size: 28rpx;
		background-color: #f9f9f9;
		box-sizing: border-box;
		resize: none;
	}

	// 上传部分
	.upload-section {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.upload-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 30rpx;
	}

	.upload-area {
		width: 100%;
		height: 300rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx dashed #ccc;
	}

	.upload-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.id-card-icon {
		position: relative;
		width: 120rpx;
		height: 80rpx;
	}

	.card-frame {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 4rpx solid #667eea;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.person-icon {
		font-size: 40rpx;
		color: #667eea;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	// 说明部分
	.description-section {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.description-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.description-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		display: block;
		margin-bottom: 15rpx;
	}

	// 提交按钮
	.submit-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #e5e5e5;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #ff4757;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		border-radius: 44rpx;
		transition: background-color 0.2s ease;
		box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);

		&:active {
			background-color: #ff3742;
		}
	}
</style>
